<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易商城</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="header">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- Logo -->
                <a href="#" class="flex items-center space-x-2">
                    <i class="fa-solid fa-shopping-bag text-primary text-2xl"></i>
                    <span class="text-xl font-bold text-neutral-700">ShopEase</span>
                </a>

                <!-- 搜索栏 - 中等屏幕以上显示 -->
                <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
                    <div class="relative w-full">
                        <input type="text" placeholder="搜索商品..." class="w-full pl-4 pr-10 py-2 rounded-full border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-primary transition-colors">
                            <i class="fa-solid fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- 导航菜单 -->
                <nav class="flex items-center space-x-4 md:space-x-6">
                    <a href="#" class="hidden md:block text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa-solid fa-bars mr-1"></i> 分类
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors relative">
                        <i class="fa-solid fa-heart text-lg"></i>
                        <span class="absolute -top-2 -right-2 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors relative">
                        <i class="fa-solid fa-shopping-cart text-lg"></i>
                        <span class="absolute -top-2 -right-2 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">2</span>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa-solid fa-user text-lg"></i>
                    </a>
                    <button class="md:hidden text-neutral-500 hover:text-primary transition-colors" id="mobile-menu-button">
                        <i class="fa-solid fa-bars text-xl"></i>
                    </button>
                </nav>
            </div>

            <!-- 移动端搜索栏 -->
            <div class="md:hidden pb-3">
                <div class="relative">
                    <input type="text" placeholder="搜索商品..." class="w-full pl-4 pr-10 py-2 rounded-full border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-primary transition-colors">
                        <i class="fa-solid fa-search"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 移动端菜单 -->
        <div class="md:hidden h-0 overflow-hidden transition-all duration-300 bg-white" id="mobile-menu">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#" class="block py-2 text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa-solid fa-home mr-2"></i> 首页
                </a>
                <a href="#" class="block py-2 text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa-solid fa-bars mr-2"></i> 全部分类
                </a>
                <a href="#" class="block py-2 text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa-solid fa-fire mr-2"></i> 热销商品
                </a>
                <a href="#" class="block py-2 text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa-solid fa-tag mr-2"></i> 优惠活动
                </a>
                <a href="#" class="block py-2 text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa-solid fa-headphones mr-2"></i> 客户服务
                </a>
            </div>
        </div>
    </header>

    <main>
        <!-- 轮播图 -->
        <section class="relative bg-neutral-200 overflow-hidden">
            <div class="container mx-auto px-4 py-6">
                <div class="relative rounded-xl overflow-hidden shadow-md">
                    <div class="carousel relative h-[200px] md:h-[400px]">
                        <div class="carousel-item absolute inset-0 opacity-100 transition-opacity duration-1000">
                            <img src="https://picsum.photos/id/26/1200/400" alt="促销活动" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-r from-primary/60 to-transparent flex flex-col justify-center px-6 md:px-12">
                                <h2 class="text-white text-2xl md:text-4xl font-bold mb-2 text-shadow animate-fade-in">夏日特惠</h2>
                                <p class="text-white/90 text-sm md:text-lg mb-4 max-w-md animate-fade-in" style="animation-delay: 0.2s">精选商品低至5折，限时抢购！</p>
                                <button class="bg-white text-primary px-4 py-2 rounded-full w-32 font-medium hover:bg-neutral-100 transition-colors shadow-md animate-fade-in" style="animation-delay: 0.4s">立即抢购</button>
                            </div>
                        </div>
                        <div class="carousel-item absolute inset-0 opacity-0 transition-opacity duration-1000">
                            <img src="https://picsum.photos/id/96/1200/400" alt="新品上市" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-r from-secondary/60 to-transparent flex flex-col justify-center px-6 md:px-12">
                                <h2 class="text-white text-2xl md:text-4xl font-bold mb-2 text-shadow">新品上市</h2>
                                <p class="text-white/90 text-sm md:text-lg mb-4 max-w-md">2025夏季新品，时尚登场！</p>
                                <button class="bg-white text-secondary px-4 py-2 rounded-full w-32 font-medium hover:bg-neutral-100 transition-colors shadow-md">查看详情</button>
                            </div>
                        </div>
                    </div>

                    <!-- 轮播指示器 -->
                    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
                        <button class="w-3 h-3 rounded-full bg-white/70 hover:bg-white transition-colors carousel-indicator active"></button>
                        <button class="w-3 h-3 rounded-full bg-white/40 hover:bg-white transition-colors carousel-indicator"></button>
                    </div>

                    <!-- 轮播控制按钮 -->
                    <button class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors carousel-prev">
                        <i class="fa-solid fa-angle-left text-xl"></i>
                    </button>
                    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors carousel-next">
                        <i class="fa-solid fa-angle-right text-xl"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 分类导航 -->
        <section class="py-6 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-xl font-bold text-neutral-700 mb-6">快速分类</h2>
                <div class="grid grid-cols-4 md:grid-cols-8 gap-4">
                    <a href="#" class="flex flex-col items-center group">
                        <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-2 group-hover:bg-primary/20 transition-colors">
                            <i class="fa-solid fa-laptop text-primary text-xl"></i>
                        </div>
                        <span class="text-sm text-neutral-600 group-hover:text-primary transition-colors">电子产品</span>
                    </a>
                    <a href="#" class="flex flex-col items-center group">
                        <div class="w-14 h-14 rounded-full bg-secondary/10 flex items-center justify-center mb-2 group-hover:bg-secondary/20 transition-colors">
                            <i class="fa-solid fa-tshirt text-secondary text-xl"></i>
                        </div>
                        <span class="text-sm text-neutral-600 group-hover:text-secondary transition-colors">服装鞋帽</span>
                    </a>
                    <a href="#" class="flex flex-col items-center group">
                        <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mb-2 group-hover:bg-green-200 transition-colors">
                            <i class="fa-solid fa-leaf text-green-600 text-xl"></i>
                        </div>
                        <span class="text-sm text-neutral-600 group-hover:text-green-600 transition-colors">家居日用</span>
                    </a>
                    <a href="#" class="flex flex-col items-center group">
                        <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center mb-2 group-hover:bg-purple-200 transition-colors">
                            <i class="fa-solid fa-gem text-purple-600 text-xl"></i>
                        </div>
                        <span class="text-sm text-neutral-600 group-hover:text-purple-600 transition-colors">珠宝首饰</span>
                    </a>
                    <a href="#" class="flex flex-col items-center group">
                        <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-2 group-hover:bg-pink-200 transition-colors">
                            <i class="fa-solid fa-gift text-pink-600 text-xl"></i>
                        </div>
                        <span class="text-sm text-neutral-600 group-hover:text-pink-600 transition-colors">礼品专区</span>
                    </a>
                    <a href="#" class="flex flex-col items-center group">
                        <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mb-2 group-hover:bg-blue-200 transition-colors">
                            <i class="fa-solid fa-gamepad text-blue-600 text-xl"></i>
                        </div>
                        <span class="text-sm text-neutral-600 group-hover:text-blue-600 transition-colors">游戏娱乐</span>
                    </a>
                    <a href="#" class="flex flex-col items-center group">
                        <div class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center mb-2 group-hover:bg-amber-200 transition-colors">
                            <i class="fa-solid fa-book text-amber-600 text-xl"></i>
                        </div>
                        <span class="text-sm text-neutral-600 group-hover:text-amber-600 transition-colors">图书音像</span>
                    </a>
                    <a href="#" class="flex flex-col items-center group">
                        <div class="w-14 h-14 rounded-full bg-teal-100 flex items-center justify-center mb-2 group-hover:bg-teal-200 transition-colors">
                            <i class="fa-solid fa-ellipsis text-teal-600 text-xl"></i>
                        </div>
                        <span class="text-sm text-neutral-600 group-hover:text-teal-600 transition-colors">更多分类</span>
                    </a>
                </div>
            </div>
        </section>

        <!-- 热销商品 -->
        <section class="py-8 bg-neutral-100">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-neutral-700">热销商品</h2>
                    <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center">
                        查看全部 <i class="fa-solid fa-angle-right ml-1"></i>
                    </a>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                    <!-- 商品卡片 1 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
                        <div class="relative">
                            <img src="https://picsum.photos/id/96/300/300" alt="智能手表" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute top-2 left-2">
                                <span class="bg-secondary text-white text-xs px-2 py-1 rounded-full">热销</span>
                            </div>
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">智能运动手表 心率监测 睡眠分析</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star-half-stroke"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(128)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥299</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 商品卡片 2 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
                        <div class="relative">
                            <img src="https://picsum.photos/id/160/300/300" alt="无线耳机" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute top-2 left-2">
                                <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">限时优惠</span>
                            </div>
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">无线蓝牙耳机 主动降噪 长续航</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(96)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-primary font-bold">¥399</span>
                                    <span class="text-xs text-neutral-400 line-through ml-1">¥499</span>
                                </div>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 商品卡片 3 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
                        <div class="relative">
                            <img src="https://picsum.photos/id/20/300/300" alt="机械键盘" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">RGB背光机械键盘 青轴 游戏专用</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(215)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥199</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 商品卡片 4 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group md:block hidden lg:block">
                        <div class="relative">
                            <img src="https://picsum.photos/id/119/300/300" alt="蓝牙音箱" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">新品</span>
                            </div>
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">便携式蓝牙音箱 户外防水 震撼音效</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(42)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥159</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 商品卡片 5 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group lg:block hidden">
                        <div class="relative">
                            <img src="https://picsum.photos/id/9/300/300" alt="智能手环" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">多功能智能手环 运动监测 睡眠分析</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star-half-stroke"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(87)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥89</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 优惠活动 -->
        <section class="py-8 bg-white">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-neutral-700">限时优惠</h2>
                    <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center">
                        查看全部 <i class="fa-solid fa-angle-right ml-1"></i>
                    </a>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- 优惠横幅 1 -->
                    <div class="relative rounded-xl overflow-hidden group h-40 md:h-56">
                        <img src="https://picsum.photos/id/106/800/400" alt="夏日特惠" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        <div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/40 flex flex-col justify-center p-6">
                            <h3 class="text-white text-xl font-bold mb-2">夏日家电特惠</h3>
                            <p class="text-white/90 mb-4 max-w-xs">满1000减200，部分商品低至5折</p>
                            <span class="inline-block bg-white text-primary px-4 py-1 rounded-full text-sm font-medium hover:bg-neutral-100 transition-colors w-fit">
                                立即抢购
                            </span>
                        </div>
                    </div>

                    <!-- 优惠横幅 2 -->
                    <div class="relative rounded-xl overflow-hidden group h-40 md:h-56">
                        <img src="https://picsum.photos/id/104/800/400" alt="会员日" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        <div class="absolute inset-0 bg-gradient-to-r from-secondary/80 to-secondary/40 flex flex-col justify-center p-6">
                            <h3 class="text-white text-xl font-bold mb-2">会员专享日</h3>
                            <p class="text-white/90 mb-4 max-w-xs">会员额外9折，积分翻倍</p>
                            <span class="inline-block bg-white text-secondary px-4 py-1 rounded-full text-sm font-medium hover:bg-neutral-100 transition-colors w-fit">
                                了解详情
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 新品上市 -->
        <section class="py-8 bg-neutral-100">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-neutral-700">新品上市</h2>
                    <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center">
                        查看全部 <i class="fa-solid fa-angle-right ml-1"></i>
                    </a>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                    <!-- 新品卡片 1 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
                        <div class="relative">
                            <img src="https://picsum.photos/id/11/300/300" alt="智能摄像头" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">新品</span>
                            </div>
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">高清智能摄像头 夜视监控 双向语音</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(12)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥179</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 新品卡片 2 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
                        <div class="relative">
                            <img src="https://picsum.photos/id/26/300/300" alt="智能门锁" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">新品</span>
                            </div>
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">指纹密码智能门锁 远程APP控制</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(8)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥349</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 新品卡片 3 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
                        <div class="relative">
                            <img src="https://picsum.photos/id/669/300/300" alt="无线充电器" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">新品</span>
                            </div>
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">30W快充无线充电器 多设备兼容</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(24)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥89</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 新品卡片 4 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group md:block hidden lg:block">
                        <div class="relative">
                            <img src="https://picsum.photos/id/139/300/300" alt="智能插座" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">新品</span>
                            </div>
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">智能WiFi插座 远程控制 定时开关</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(16)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥49</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 新品卡片 5 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group lg:block hidden">
                        <div class="relative">
                            <img src="https://picsum.photos/id/96/300/300" alt="智能灯泡" class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">新品</span>
                            </div>
                            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-neutral-500 hover:text-red-500 transition-colors">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-neutral-700 line-clamp-2 h-10 mb-2">智能彩色灯泡 语音控制 远程调光</h3>
                            <div class="flex items-center mb-1">
                                <div class="flex text-yellow-400 text-xs">
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <span class="text-xs text-neutral-400 ml-1">(5)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-primary font-bold">¥69</span>
                                <button class="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center text-primary transition-colors">
                                    <i class="fa-solid fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 用户评价 -->
        <section class="py-8 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-xl font-bold text-neutral-700 mb-6">用户评价</h2>

                <div class="relative">
                    <div class="overflow-x-auto scrollbar-hide pb-4">
                        <div class="flex space-x-4 w-max">
                            <!-- 评价卡片 1 -->
                            <div class="bg-neutral-50 rounded-xl p-4 shadow-sm w-72 flex-shrink-0">
                                <div class="flex items-center mb-3">
                                    <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                    <div class="ml-3">
                                        <h4 class="font-medium text-neutral-700">张先生</h4>
                                        <div class="flex text-yellow-400 text-xs mt-1">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-neutral-600 text-sm mb-3">"这个智能手表的功能很强大，心率监测和睡眠分析非常准确，续航也不错，值得购买！"</p>
                                <div class="flex space-x-2">
                                    <img src="https://picsum.photos/id/96/80/80" alt="评价图片" class="w-16 h-16 rounded-lg object-cover">
                                    <img src="https://picsum.photos/id/20/80/80" alt="评价图片" class="w-16 h-16 rounded-lg object-cover">
                                </div>
                                <p class="text-neutral-400 text-xs mt-3">购买了 智能运动手表</p>
                            </div>

                            <!-- 评价卡片 2 -->
                            <div class="bg-neutral-50 rounded-xl p-4 shadow-sm w-72 flex-shrink-0">
                                <div class="flex items-center mb-3">
                                    <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                    <div class="ml-3">
                                        <h4 class="font-medium text-neutral-700">李女士</h4>
                                        <div class="flex text-yellow-400 text-xs mt-1">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-neutral-600 text-sm mb-3">"无线耳机的音质很好，降噪效果也不错，佩戴舒适，但续航略短，总体来说很满意。"</p>
                                <div class="flex space-x-2">
                                    <img src="https://picsum.photos/id/160/80/80" alt="评价图片" class="w-16 h-16 rounded-lg object-cover">
                                </div>
                                <p class="text-neutral-400 text-xs mt-3">购买了 无线蓝牙耳机</p>
                            </div>

                            <!-- 评价卡片 3 -->
                            <div class="bg-neutral-50 rounded-xl p-4 shadow-sm w-72 flex-shrink-0">
                                <div class="flex items-center mb-3">
                                    <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                    <div class="ml-3">
                                        <h4 class="font-medium text-neutral-700">王先生</h4>
                                        <div class="flex text-yellow-400 text-xs mt-1">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-regular fa-star"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-neutral-600 text-sm mb-3">"机械键盘的手感很好，RGB灯光效果也很炫，但键帽的做工一般，有轻微毛刺。"</p>
                                <div class="flex space-x-2">
                                    <img src="https://picsum.photos/id/20/80/80" alt="评价图片" class="w-16 h-16 rounded-lg object-cover">
                                    <img src="https://picsum.photos/id/119/80/80" alt="评价图片" class="w-16 h-16 rounded-lg object-cover">
                                </div>
                                <p class="text-neutral-400 text-xs mt-3">购买了 RGB背光机械键盘</p>
                            </div>

                            <!-- 评价卡片 4 -->
                            <div class="bg-neutral-50 rounded-xl p-4 shadow-sm w-72 flex-shrink-0">
                                <div class="flex items-center mb-3">
                                    <img src="https://picsum.photos/id/26/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                    <div class="ml-3">
                                        <h4 class="font-medium text-neutral-700">赵女士</h4>
                                        <div class="flex text-yellow-400 text-xs mt-1">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-neutral-600 text-sm mb-3">"智能门锁安装简单，指纹识别速度快，APP控制也很方便，就是价格略高。"</p>
                                <div class="flex space-x-2">
                                    <img src="https://picsum.photos/id/26/80/80" alt="评价图片" class="w-16 h-16 rounded-lg object-cover">
                                </div>
                                <p class="text-neutral-400 text-xs mt-3">购买了 指纹密码智能门锁</p>
                            </div>
                        </div>
                    </div>

                    <!-- 滚动控制按钮 -->
                    <button class="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-neutral-500 hover:text-primary transition-colors opacity-70 hover:opacity-100">
                        <i class="fa-solid fa-angle-left text-xl"></i>
                    </button>
                    <button class="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-neutral-500 hover:text-primary transition-colors opacity-70 hover:opacity-100">
                        <i class="fa-solid fa-angle-right text-xl"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 订阅区域 -->
        <section class="py-12 bg-primary/5">
            <div class="container mx-auto px-4">
                <div class="max-w-2xl mx-auto text-center">
                    <h2 class="text-2xl font-bold text-neutral-700 mb-3">订阅我们的新闻资讯</h2>
                    <p class="text-neutral-500 mb-6">第一时间获取最新产品信息和独家优惠</p>
                    <div class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
                        <input type="email" placeholder="请输入您的邮箱地址" class="flex-1 px-4 py-3 rounded-lg border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-md">
                            立即订阅
                        </button>
                    </div>
                    <p class="text-neutral-400 text-xs mt-4">我们尊重您的隐私，绝不会向第三方分享您的信息</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-700 text-white pt-12 pb-6">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa-solid fa-shopping-bag text-white text-2xl"></i>
                        <span class="text-xl font-bold">ShopEase</span>
                    </div>
                    <p class="text-neutral-300 text-sm mb-4">提供高品质的电子产品和家居用品，让生活更便捷</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                            <i class="fa-brands fa-weibo"></i>
                        </a>
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                            <i class="fa-brands fa-wechat"></i>
                        </a>
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-neutral-300">
                        <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">全部商品</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">新品上市</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">热销商品</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">优惠活动</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-neutral-300">
                        <li><a href="#" class="hover:text-white transition-colors">购物指南</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">支付方式</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">配送说明</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">售后服务</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-neutral-300">
                        <li class="flex items-start">
                            <i class="fa-solid fa-map-marker-alt mt-1 mr-3"></i>
                            <span>北京市朝阳区建国路88号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa-solid fa-phone mr-3"></i>
                            <span>400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa-solid fa-envelope mr-3"></i>
                            <span>support@shopease.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa-solid fa-clock mr-3"></i>
                            <span>周一至周日 9:00-21:00</span>
                        </li>
                    </ul>
                </div>
            </div>

            <hr class="border-neutral-600 my-8">

            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-neutral-400 text-sm mb-4 md:mb-0">© 2025 ShopEase. 保留所有权利。</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-neutral-400 hover:text-white text-sm transition-colors">隐私政策</a>
                    <a href="#" class="text-neutral-400 hover:text-white text-sm transition-colors">服务条款</a>
                    <a href="#" class="text-neutral-400 hover:text-white text-sm transition-colors">网站地图</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
        <i class="fa-solid fa-arrow-up"></i>
    </button>

    <script>
        // 移动端菜单控制
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            if (mobileMenu.classList.contains('h-0')) {
                mobileMenu.classList.remove('h-0');
                mobileMenu.classList.add('h-auto');
                mobileMenuButton.innerHTML = '<i class="fa-solid fa-times text-xl"></i>';
            } else {
                mobileMenu.classList.add('h-0');
                mobileMenu.classList.remove('h-auto');
                mobileMenuButton.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
            }
        });

        // 导航栏滚动效果
        const header = document.getElementById('header');
        let lastScrollTop = 0;

        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > 50) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }

            lastScrollTop = scrollTop;
        });

        // 轮播图控制
        const carouselItems = document.querySelectorAll('.carousel-item');
        const carouselIndicators = document.querySelectorAll('.carousel-indicator');
        const carouselPrev = document.querySelector('.carousel-prev');
        const carouselNext = document.querySelector('.carousel-next');
        let currentSlide = 0;

        function showSlide(index) {
            carouselItems.forEach(item => item.classList.add('opacity-0'));
            carouselItems.forEach(item => item.classList.remove('opacity-100'));
            carouselIndicators.forEach(indicator => indicator.classList.remove('bg-white/70', 'active'));
            carouselIndicators.forEach(indicator => indicator.classList.add('bg-white/40'));

            carouselItems[index].classList.remove('opacity-0');
            carouselItems[index].classList.add('opacity-100');
            carouselIndicators[index].classList.remove('bg-white/40');
            carouselIndicators[index].classList.add('bg-white/70', 'active');

            currentSlide = index;
        }

        carouselIndicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                showSlide(index);
            });
        });

        carouselPrev.addEventListener('click', () => {
            let newIndex = currentSlide - 1;
            if (newIndex < 0) newIndex = carouselItems.length - 1;
            showSlide(newIndex);
        });

        carouselNext.addEventListener('click', () => {
            let newIndex = currentSlide + 1;
            if (newIndex >= carouselItems.length) newIndex = 0;
            showSlide(newIndex);
        });

        // 自动轮播
        setInterval(() => {
            let newIndex = currentSlide + 1;
            if (newIndex >= carouselItems.length) newIndex = 0;
            showSlide(newIndex);
        }, 5000);

        // 返回顶部按钮
        const backToTopButton = document.getElementById('back-to-top');

        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.add('opacity-0', 'invisible');
                backToTopButton.classList.remove('opacity-100', 'visible');
            }
        });

        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
</body>
</html>
